<template>
  <div>
    <el-row :gutter="24" class="mb8" style="margin-top: 20px;">
      <el-col :span="24">
        <el-button style="margin-right: 10px" :type="isChangeBtn?'primary':''" @click="singleSubjectList()">单科列表</el-button>
        <el-button style="margin-left: 0" :type="isChangeBtn?'':'primary'" @click="totalScoreList()">总分列表</el-button>
      </el-col>
    </el-row>

    <div v-show="isChangeBtn">
      <single-subject-list ref="singlesubjectlist"></single-subject-list>
    </div>
    <div v-show="!isChangeBtn">
      <total-score-list ref="totalscorelist"></total-score-list>
    </div>
  </div>
</template>

<script>
  import singleSubjectList from "@/components/ToolSystem/Grade/singleSubjectList"
  import totalScoreList from "@/components/ToolSystem/Grade/totalScoreList"
    export default {
      name: "subjectGrade",
      components:{
        singleSubjectList,
        totalScoreList
      },
      data(){
        return {
          isChangeBtn: true
        }
      },
      methods:{
        // 单科列表按钮
        singleSubjectList(){
          this.isChangeBtn = true
          this.$refs.singlesubjectlist.getList();
        },
        // 总分列表按钮
        totalScoreList(){
          this.isChangeBtn = false
          this.$refs.totalscorelist.getList();
        }
      }
    }
</script>

<style scoped>
</style>
